import * as React from 'react'
import { Layout, Carousel, Button, Tabs } from 'element-react';
import 'element-theme-default';
// import axios from 'axios';
class Home extends React.Component<any, {}> {
    constructor(props) {
        super(props);
        this.state = {

        }
    }
    render() {
        return (
            <div style={styles.bg} className='home'>
                <header><span style={{ fontSize: 5 }}>金牌教练</span>| <span style={{ fontSize: 5 }}>2019年度长沙'驾考金牌教练'评选大赛 参加评选赢取</span></header>
                <div>
                    <div className="block">

                        <Carousel trigger="click" height="150px">
                            {
                                [1, 2, 3, 4].map((item, index) => {
                                    return (
                                        <Carousel.Item key={index}>
                                            <img style={{ width: '100%', height: 'auto' }} src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565280662745&di=deadf5542df7f7fe0e8a4b8125cbaef3&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F02dcc6b868a63398b9555e4bb43c6c1996a50c8c50ca-Alkyvy_fw658' />
                                        </Carousel.Item>

                                    )
                                })
                            }
                        </Carousel>
                    </div>
                    <div>
                        <h3 style={{ textAlign: 'center' }}>2019年度长沙"驾考金牌教练"评选大赛<br />参加评选赢取终极大奖</h3>
                        <div style={{ textAlign: 'center' }}>5天23分18秒后活动结束</div>
                    </div>
                    <div>
                        <Layout.Row type="flex" className="row-bg" style={{ background: 'rgba(81,135,244)', padding: 10, marginTop: 10 }}>
                            <Layout.Col span="8">
                                <div style={{ textAlign: 'center', display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center', borderRightWidth: 1, borderRightStyle: 'solid', borderRightColor: 'white' }}>
                                    <div style={{ color: 'white', fontWeight: 'bold' }}>32</div>
                                    <div style={{ color: 'white', fontWeight: 'bold', fontSize: 14 }}>参与选手</div>
                                </div>

                            </Layout.Col>
                            <Layout.Col span="8">
                                <div style={{ textAlign: 'center', display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center', borderRightWidth: 1, borderRightStyle: 'solid', borderRightColor: 'white' }}>
                                    <div style={{ color: 'white', fontWeight: 'bold' }}>2015</div>
                                    <div style={{ color: 'white', fontWeight: 'bold', fontSize: 14 }}>统计投票</div>
                                </div>
                            </Layout.Col>
                            <Layout.Col span="8">
                                <div style={{ textAlign: 'center', display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center' }}>
                                    <div style={{ color: 'white', fontWeight: 'bold' }}>1240</div>
                                    <div style={{ color: 'white', fontWeight: 'bold', fontSize: 14 }}>访问总量</div>
                                </div>
                            </Layout.Col>
                        </Layout.Row>
                    </div>
                    <div>
                        <div style={{ textAlign: 'left', paddingLeft: 15, margin: 10 }}>
                            <div style={{ fontSize: 14 }}>活动时间：07-26 12：00:00至08-10 12:00:00</div>
                            <div style={{ fontSize: 14 }}>活动时间：07-26 12：00:00至08-10 12:00:00</div>
                        </div>
                    </div>
                    <div>
                        <Layout.Row type="flex" className="row-bg" style={{ padding: 10, marginTop: 10 }}>
                            <Layout.Col span="8">
                                <div style={{ display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center' }}>
                                    <Button type="primary">奖品/规则</Button>
                                </div>
                            </Layout.Col>
                            <Layout.Col span="8">
                                <div style={{ display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center' }}>
                                    <Button type="primary">比赛排名</Button>
                                </div>
                            </Layout.Col>
                            <Layout.Col span="8">
                                <div style={{ display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center' }}>
                                    <Button type="primary">我要报名</Button>
                                </div>
                            </Layout.Col>
                        </Layout.Row>
                    </div>
                    <div>
                        <Tabs activeName="1" onTabClick={(tab) => console.log(tab.props.name)}>
                            <Tabs.Pane label="排名选手" name="1">
                                <Layout.Row style={{ marginTop: 10 }}>
                                    <Layout.Col span="12" style={{ marginTop: 10 }}>
                                        <div style={{ display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center', position: 'relative' }}>
                                            <div style={{ padding: 5, position: 'absolute', top: 5, left: 30, background: 'rgba(81,135,244)', color: 'white', fontSize: 12 }}>310票</div>
                                            <img style={{ height: 200, width: 'auto' }} src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1565274528&di=02fa8b855c80a20bcd9764c3ece74977&src=http://img.pconline.com.cn/images/photoblog/6/4/2/3/6423714/20081/19/1200742081706_mthumb.jpg" />
                                            <div style={{ margin: 5 }}>NO.003刘德华</div>
                                            <Button type="primary" size='mini'> 投TA一票</Button>
                                        </div>
                                    </Layout.Col>
                                    <Layout.Col span="12" style={{ marginTop: 10 }}>
                                        <div style={{ display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center', position: 'relative' }}>
                                            <div style={{ padding: 5, position: 'absolute', top: 5, left: 30, background: 'rgba(81,135,244)', color: 'white', fontSize: 12 }}>310票</div>
                                            <img style={{ height: 200, width: 'auto' }} src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1565274528&di=02fa8b855c80a20bcd9764c3ece74977&src=http://img.pconline.com.cn/images/photoblog/6/4/2/3/6423714/20081/19/1200742081706_mthumb.jpg" />
                                            <div style={{ margin: 5 }}>NO.003刘德华</div>
                                            <Button type="primary" size='mini'> 投TA一票</Button>
                                        </div>
                                    </Layout.Col>
                                    <Layout.Col span="12" style={{ marginTop: 10 }}>
                                        <div style={{ display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center', position: 'relative' }}>
                                            <div style={{ padding: 5, position: 'absolute', top: 5, left: 30, background: 'rgba(81,135,244)', color: 'white', fontSize: 12 }}>310票</div>
                                            <img style={{ height: 200, width: 'auto' }} src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1565274528&di=02fa8b855c80a20bcd9764c3ece74977&src=http://img.pconline.com.cn/images/photoblog/6/4/2/3/6423714/20081/19/1200742081706_mthumb.jpg" />
                                            <div style={{ margin: 5 }}>NO.003刘德华</div>
                                            <Button type="primary" size='mini'> 投TA一票</Button>
                                        </div>
                                    </Layout.Col>
                                    <Layout.Col span="12" style={{ marginTop: 10 }}>
                                        <div style={{ display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center', position: 'relative' }}>
                                            <div style={{ padding: 5, position: 'absolute', top: 5, left: 30, background: 'rgba(81,135,244)', color: 'white', fontSize: 12 }}>310票</div>
                                            <img style={{ height: 200, width: 'auto' }} src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1565274528&di=02fa8b855c80a20bcd9764c3ece74977&src=http://img.pconline.com.cn/images/photoblog/6/4/2/3/6423714/20081/19/1200742081706_mthumb.jpg" />
                                            <div style={{ margin: 5 }}>NO.003刘德华</div>
                                            <Button type="primary" size='mini'> 投TA一票</Button>
                                        </div>
                                    </Layout.Col>
                                    <Layout.Col span="12" style={{ marginTop: 10 }}>
                                        <div style={{ display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center', position: 'relative' }}>
                                            <div style={{ padding: 5, position: 'absolute', top: 5, left: 30, background: 'rgba(81,135,244)', color: 'white', fontSize: 12 }}>310票</div>
                                            <img style={{ height: 200, width: 'auto' }} src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1565274528&di=02fa8b855c80a20bcd9764c3ece74977&src=http://img.pconline.com.cn/images/photoblog/6/4/2/3/6423714/20081/19/1200742081706_mthumb.jpg" />
                                            <div style={{ margin: 5 }}>NO.003刘德华</div>
                                            <Button type="primary" size='mini'> 投TA一票</Button>
                                        </div>
                                    </Layout.Col>
                                </Layout.Row>

                            </Tabs.Pane>
                            <Tabs.Pane label="最新选手" name="2">
                                <Layout.Row style={{ marginTop: 10 }}>
                                    <Layout.Col span="12" style={{ marginTop: 10 }}>
                                        <div style={{ display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center', position: 'relative' }}>
                                            <div style={{ padding: 5, position: 'absolute', top: 5, left: 30, background: 'rgba(81,135,244)', color: 'white', fontSize: 12 }}>310票</div>
                                            <img style={{ height: 200, width: 'auto' }} src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1565274528&di=02fa8b855c80a20bcd9764c3ece74977&src=http://img.pconline.com.cn/images/photoblog/6/4/2/3/6423714/20081/19/1200742081706_mthumb.jpg" />
                                            <div style={{ margin: 5 }}>NO.003刘德华</div>
                                            <Button type="primary" size='mini'> 投TA一票</Button>
                                        </div>
                                    </Layout.Col>
                                    <Layout.Col span="12" style={{ marginTop: 10 }}>
                                        <div style={{ display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center', position: 'relative' }}>
                                            <div style={{ padding: 5, position: 'absolute', top: 5, left: 30, background: 'rgba(81,135,244)', color: 'white', fontSize: 12 }}>310票</div>
                                            <img style={{ height: 200, width: 'auto' }} src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1565274528&di=02fa8b855c80a20bcd9764c3ece74977&src=http://img.pconline.com.cn/images/photoblog/6/4/2/3/6423714/20081/19/1200742081706_mthumb.jpg" />
                                            <div style={{ margin: 5 }}>NO.003刘德华</div>
                                            <Button type="primary" size='mini'> 投TA一票</Button>
                                        </div>
                                    </Layout.Col>
                                    <Layout.Col span="12" style={{ marginTop: 10 }}>
                                        <div style={{ display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center' }}>
                                            <div style={{ padding: 5, position: 'absolute', top: 5, left: 30, background: 'rgba(81,135,244)', color: 'white', fontSize: 12 }}>310票</div>
                                            <img style={{ height: 200, width: 'auto' }} src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1565274528&di=02fa8b855c80a20bcd9764c3ece74977&src=http://img.pconline.com.cn/images/photoblog/6/4/2/3/6423714/20081/19/1200742081706_mthumb.jpg" />
                                            <div style={{ margin: 5 }}>NO.003刘德华</div>
                                            <Button type="primary" size='mini'> 投TA一票</Button>
                                        </div>
                                    </Layout.Col>
                                    <Layout.Col span="12" style={{ marginTop: 10 }}>
                                        <div style={{ display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center' }}>
                                            <div style={{ padding: 5, position: 'absolute', top: 5, left: 30, background: 'rgba(81,135,244)', color: 'white', fontSize: 12 }}>310票</div>
                                            <img style={{ height: 200, width: 'auto' }} src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1565274528&di=02fa8b855c80a20bcd9764c3ece74977&src=http://img.pconline.com.cn/images/photoblog/6/4/2/3/6423714/20081/19/1200742081706_mthumb.jpg" />
                                            <div style={{ margin: 5 }}>NO.003刘德华</div>
                                            <Button type="primary" size='mini'> 投TA一票</Button>
                                        </div>
                                    </Layout.Col>
                                    <Layout.Col span="12">
                                        <div style={{ display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center' }}>
                                            <div style={{ padding: 5, position: 'absolute', top: 5, left: 30, background: 'rgba(81,135,244)', color: 'white', fontSize: 12 }}>310票</div>
                                            <img style={{ height: 200, width: 'auto' }} src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1565274528&di=02fa8b855c80a20bcd9764c3ece74977&src=http://img.pconline.com.cn/images/photoblog/6/4/2/3/6423714/20081/19/1200742081706_mthumb.jpg" />
                                            <div style={{ margin: 5 }}>NO.003刘德华</div>
                                            <Button type="primary" size='mini'> 投TA一票</Button>
                                        </div>
                                    </Layout.Col>
                                </Layout.Row>
                            </Tabs.Pane>
                            <Tabs.Pane label="热门选手" name="3">
                                <Layout.Row style={{}}>
                                    <Layout.Col span="12" style={{ marginTop: 10 }}>
                                        <div style={{ display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center' }}>
                                            <div style={{ padding: 5, position: 'absolute', top: 5, left: 30, background: 'rgba(81,135,244)', color: 'white', fontSize: 12 }}>310票</div>
                                            <img style={{ height: 200, width: 'auto' }} src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1565274528&di=02fa8b855c80a20bcd9764c3ece74977&src=http://img.pconline.com.cn/images/photoblog/6/4/2/3/6423714/20081/19/1200742081706_mthumb.jpg" />
                                            <div style={{ margin: 5 }}>NO.003刘德华</div>
                                            <Button type="primary" size='mini'> 投TA一票</Button>
                                        </div>
                                    </Layout.Col>
                                    <Layout.Col span="12" style={{ marginTop: 10 }}>
                                        <div style={{ display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center' }}>
                                            <div style={{ padding: 5, position: 'absolute', top: 5, left: 30, background: 'rgba(81,135,244)', color: 'white', fontSize: 12 }}>310票</div>
                                            <img style={{ height: 200, width: 'auto' }} src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1565274528&di=02fa8b855c80a20bcd9764c3ece74977&src=http://img.pconline.com.cn/images/photoblog/6/4/2/3/6423714/20081/19/1200742081706_mthumb.jpg" />
                                            <div style={{ margin: 5 }}>NO.003刘德华</div>
                                            <Button type="primary" size='mini'> 投TA一票</Button>
                                        </div>
                                    </Layout.Col>
                                    <Layout.Col span="12" style={{ marginTop: 10 }}>
                                        <div style={{ display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center' }}>
                                            <div style={{ padding: 5, position: 'absolute', top: 5, left: 30, background: 'rgba(81,135,244)', color: 'white', fontSize: 12 }}>310票</div>
                                            <img style={{ height: 200, width: 'auto' }} src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1565274528&di=02fa8b855c80a20bcd9764c3ece74977&src=http://img.pconline.com.cn/images/photoblog/6/4/2/3/6423714/20081/19/1200742081706_mthumb.jpg" />
                                            <div style={{ margin: 5 }}>NO.003刘德华</div>
                                            <Button type="primary" size='mini'> 投TA一票</Button>
                                        </div>
                                    </Layout.Col>
                                    <Layout.Col span="12" style={{ marginTop: 10 }}>
                                        <div style={{ display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center' }}>
                                            <div style={{ padding: 5, position: 'absolute', top: 5, left: 30, background: 'rgba(81,135,244)', color: 'white', fontSize: 12 }}>310票</div>
                                            <img style={{ height: 200, width: 'auto' }} src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1565274528&di=02fa8b855c80a20bcd9764c3ece74977&src=http://img.pconline.com.cn/images/photoblog/6/4/2/3/6423714/20081/19/1200742081706_mthumb.jpg" />
                                            <div style={{ margin: 5 }}>NO.003刘德华</div>
                                            <Button type="primary" size='mini'> 投TA一票</Button>
                                        </div>
                                    </Layout.Col>
                                    <Layout.Col span="12">
                                        <div style={{ display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center' }}>
                                            <div style={{ padding: 5, position: 'absolute', top: 5, left: 30, background: 'rgba(81,135,244)', color: 'white', fontSize: 12 }}>310票</div>
                                            <img style={{ height: 200, width: 'auto' }} src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1565274528&di=02fa8b855c80a20bcd9764c3ece74977&src=http://img.pconline.com.cn/images/photoblog/6/4/2/3/6423714/20081/19/1200742081706_mthumb.jpg" />
                                            <div style={{ margin: 5 }}>NO.003刘德华</div>
                                            <Button type="primary" size='mini'> 投TA一票</Button>
                                        </div>
                                    </Layout.Col>
                                </Layout.Row>
                            </Tabs.Pane>

                        </Tabs>
                    </div>
                    <div style={{ height: 1000 }}></div>
                </div>
                <div
                    style={{
                        position: 'fixed', bottom: 0, left: 0, width: '100%', background: 'rgba(245,245,245)', height: 50
                    }}>
                    <Layout.Row>
                        <Layout.Col span="5">
                            <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', paddingTop: 5 }}>
                                <img src={require('../../static/home.png')} style={{ height: 20, width: 'auto' }} />
                            </div>
                            <div className="grid-content bg-purple" style={{ color: "red", textAlign: 'center', fontSize: 14 }} onClick={() => { location.href = '/home' }}>首页</div>
                        </Layout.Col>
                        <Layout.Col span="5">
                            <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', paddingTop: 5 }}>
                                <img src={require('../../static/paihangbang.png')} style={{ height: 20, width: 'auto' }} />
                            </div>
                            <div className="grid-content bg-purple-light" style={{ textAlign: 'center', fontSize: 14 }} onClick={() => { location.href = '/paihangbang' }}>排行榜</div>
                        </Layout.Col>
                        <Layout.Col span="5">
                            <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', paddingTop: 5 }}>
                                <img src={require('../../static/choujiang.png')} style={{ height: 20, width: 'auto' }} />
                            </div>
                            <div className="grid-content bg-purple" style={{ textAlign: 'center', fontSize: 14 }} onClick={() => { location.href = '/zhuanpan' }}>幸运抽奖</div>
                        </Layout.Col>
                        <Layout.Col span="5">
                            <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', paddingTop: 5 }}>
                                <img src={require('../../static/paihangbang.png')} style={{ height: 20, width: 'auto' }} />
                            </div>
                            <div className="grid-content bg-purple" style={{ textAlign: 'center', fontSize: 14 }} onClick={() => { location.href = '/zhuanpan' }}>奖品</div>
                        </Layout.Col>
                        <Layout.Col span="4">
                            <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', paddingTop: 5 }}>
                                <img src={require('../../static/baoming.png')} style={{ height: 20, width: 'auto' }} />
                            </div>
                            <div className="grid-content bg-purple-light" style={{ textAlign: 'center', fontSize: 14 }} onClick={() => { location.href = '/setting' }}>我要报名</div>
                        </Layout.Col>
                    </Layout.Row>
                </div>
            </div>
        )
    }
    componentDidMount() {
        let query = window.location.search;
        let arr = query.split('&');
        let code = arr[0].substr(6)
        if (code !== null) {
            this.get_access_token(code);
        }
        console.log('code', code);
        if (sessionStorage.getItem('user_id') == null) {
            window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx73207db77730dc8e&redirect_uri=http%3a%2f%2fcxj.cross.echosite.cn%2fhome&response_type=code&scope=snsapi_userinfo&state=xxx#wechat_redirect'
            sessionStorage.setItem('user_id', '1');
        }

    }
    get_access_token(code: string) {
        let myHeaders = new Headers({ 'Access-Control-Allow-Origin': '*', 'Content-Type': 'application/json' });
        fetch('http://api-yyl.otmk.club/wechat/sns/default/login?code=' + code, {
            method: 'GET',
            headers: myHeaders,
            mode: 'cors',
            cache: 'default'
        }).then((data) => {
            let result = data.json();
            console.log('-----', result);
            // if (result.meta === '0000') {
            //     console.log('-----', result);
            //     sessionStorage.getItem('user_id', result.id);
            // }
        })
        // const _this = this;    //先存一下this，以防使用箭头函数this会指向我们不希望它所指向的对象。
        // fetch('api-yyl.otmk.club/wechat/sns/default/login?code=' + code)
        //     .then(function (response) {
        //         // _this.setState({
        //         //     users: response.data,
        //         //     isLoaded: true
        //         // });
        //         console.log('response', response);
        //     })
        //     .catch(function (error) {
        //         console.log(error);
        //         // _this.setState({
        //         //     isLoaded: false,
        //         //     error: error
        //         // })
        //     })
    }
}

const styles: any = {
    bg: {
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%'
    }
}

export default Home